<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			 *{
			 	margin: 0;
			 	padding: 0;
			 }
			 #box button{
			 	width: 70px;
			 	height: 30px;
			 }
			 #box div{
			 	width: 240px;
			 	height: 140px;
			 	border: 1px solid pink;
			 	display: none;
			 }
			 #box button.active{
			 	background: pink;
			 }
			 #box div.active{
			 	display: block;
			 }
		</style>
	</head>
	<body>
		
		<div id="box">
			<button class="active">按钮一</button>
			<button>按钮二</button>
			<button>按钮三</button>
			<div class="active">内容一</div>
			<div>内容二</div>
			<div>内容三</div>
		</div>
		
	</body>
<script type="text/javascript">
	
       window.onload = function () {
            var t1 = new Tab("#box") //创建
            t1.init()  //初始化
        }
        
        function Tab(id) {
            this.oDiv = document.querySelector(id)
            this.aBtn = this.oDiv.querySelectorAll("button")
            this.aDiv = this.oDiv.querySelectorAll("div");
        }

        Tab.prototype.init = function () {
            for(var i=0;i<this.aBtn.length;i++){
                this.aBtn[i].index = i;
                var This = this;
                this.aBtn[i].onclick = function () {
                    This.changeTab(this)
                }
            }
        }
        
        Tab.prototype.changeTab = function (oBtn){
            for(var i=0;i<this.aBtn.length;i++){
                this.aBtn[i].className = ""
                this.aDiv[i].style.display = "none"
            }
            oBtn.className = "active";
            this.aDiv[oBtn.index].style.display = "block"
        }	
        
        
</script>	
</html>
